<template>
  <el-form label-width="100px">
    <el-form-item label="sku名称">
      <el-input placeholder="sku名称" v-model="skuForm.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        type="number"
        placeholder="价格(元)"
        v-model="skuForm.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input
        type="number"
        placeholder="重量(g)"
        v-model="skuForm.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="sku描述">
      <el-input
        type="textarea"
        placeholder="sku描述"
        v-model="skuForm.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <el-form-item
          :label="item.attrName"
          v-for="(item, index) in attrs"
          :key="index"
        >
          <el-select v-model="item.arrtIdAndId">
            <el-option
              :value="`${item.id}:${item1.id}`"
              :label="item1.valueName"
              v-for="(item1, index1) in item.attrValueList"
              :key="index1"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item
          :label="item.saleAttrName"
          v-for="(item, index) in saleAttrs"
          :key="index"
        >
          <el-select v-model="item.spuIdAndId">
            <el-option
              :value="`${item.id}:${item1.id}`"
              :label="item1.saleAttrValueName"
              v-for="(item1, index1) in item.spuSaleAttrValueList"
              :key="index1"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border :data="imgs" ref="table">
        <el-table-column
          align="center"
          type="selection"
          width="80px"
          selectable=""
        ></el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img :src="row.imgUrl" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button
              type="primary"
              size="small"
              icon="Setting"
              @click="setImg(row)"
            >
              设置为默认图片
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveSku">保存</el-button>
      <el-button type="primary" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { reqSpuHasSaleAttr, reqSpuImageList, reqAddSku } from '@/api/pro/spu.ts'
import { reqAttrs } from '@/api/pro/att.ts'
import { ElMessage } from 'element-plus'
let table = ref()
let skuForm = ref({
  //   category3Id: string | number //三级分类的ID
  //   spuId: string | number //已有的SPU的ID
  //   tmId: string | number //SPU品牌的ID
  skuName: '', //sku名字
  price: '', //sku价格
  weight: '', //sku重量
  skuDesc: '', //sku的描述
  //   skuAttrValueList?: [
  //     {
  //   attrId: number | string //平台属性的ID
  //   valueId: number | string //属性值的ID
  //     }
  //   ]
  //   skuSaleAttrValueList?: [
  //     {
  //         saleAttrId: number | string //属性ID
  //   saleAttrValueId: number | string //属性值的ID
  //     }
  //   ]
  //   skuDefaultImg: string //sku图片地址
})
//平台属性
let attrs = ref([])
//销售属性
let saleAttrs = ref([])
//图片
let imgs = ref([])
let $emit = defineEmits(['changeScreen'])
//初始化数据
const initSkuData = async (c1Id, c2Id, spu) => {
  //清空数据
  skuForm.value.skuName = ''
  skuForm.value.price = ''
  skuForm.value.weight = ''
  skuForm.value.skuDesc = ''
  //平台属性
  let res1 = await reqAttrs(c1Id, c2Id, spu.category3Id)
  //销售属性
  let res2 = await reqSpuHasSaleAttr(spu.id)
  //图片
  let res3 = await reqSpuImageList(spu.id)
  attrs.value = res1.data
  saleAttrs.value = res2.data
  imgs.value = res3.data
  //绑定数据
  skuForm.value.category3Id = spu.category3Id
  skuForm.value.spuId = spu.id
  skuForm.value.tmId = spu.tmId
}
//设置图片方法
const setImg = (row) => {
  table.value.clearSelection()
  table.value.toggleRowSelection(row, true)
  //保存图片
  skuForm.value.skuDefaultImg = row.imgUrl
}
//保存
const saveSku = async () => {
  //解构出来平台属性和销售属性
  let skuAttrValueList = attrs.value.reduce((res, pre) => {
    if (pre.arrtIdAndId) {
      let [attrId, valueId] = pre.arrtIdAndId.split(':')
      res.push({
        attrId,
        valueId,
      })
    }
    return res
  }, [])
  let skuSaleAttrValueList = saleAttrs.value.reduce((res, pre) => {
    if (pre.spuIdAndId) {
      let [saleAttrId, saleAttrValueId] = pre.spuIdAndId.split(':')
      res.push({
        saleAttrId,
        saleAttrValueId,
      })
    }
    return res
  }, [])
  skuForm.value.skuAttrValueList = skuAttrValueList
  skuForm.value.skuSaleAttrValueList = skuSaleAttrValueList

  let res = await reqAddSku(skuForm.value)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: '添加成功',
    })
    $emit('changeScreen', { tag: 0, param: '' })
  } else {
    ElMessage({
      type: 'success',
      message: '添加成功',
    })
  }
}
//取消
const cancel = () => {
  $emit('changeScreen', { tag: 0, param: '' })
}
//暴露给父组件
defineExpose({
  initSkuData,
})
</script>
<style scoped lang="scss"></style>
